<template>
  <div class="list-item">
    <div class="item-box">
      <div class="item-left"><img :src="FormImg" /></div>
      <div class="item-right">
        <div class="item-title">{{ t('功能名称') }}</div>
        <a-tooltip v-if="props.item.formName.length > 12" :title="props.item.formName">
          <div class="item-form-name"> {{ `${props.item.formName.slice(0, 12)}...` }}</div>
        </a-tooltip>
        <div class="item-form-name" v-else> {{ props.item.formName }}</div>
      </div>
      <div class="fixed-checked">
        <slot name="check"></slot>
      </div>
      <div class="fixed-circle"><PreviewForm :item="props.item" /></div>
      <div class="form-icon">
        <IconFontSymbol icon="form" :fill-color="fillColor" />
      </div>
      <div class="fixed-title"> {{ bgTitle }} </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import customFormImg from '/@/assets/workflow/custom-form.png';
  import systemFormImg from '/@/assets/workflow/system-form.png';
  import PreviewForm from '/@bpmn/components/formSettings/PreviewForm.vue';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { FormType } from '/@/enums/workflowEnum';
  import { FormSettingItem } from '/@/model/workflow/formSetting';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  defineEmits(['preview']);

  let props = withDefaults(defineProps<{ item: FormSettingItem }>(), {
    item: () => {
      return { formName: '', key: '', formType: FormType.CUSTOM, formId: '' };
    },
  });

  const FormImg = computed(() => {
    return props.item.formType == FormType.CUSTOM ? customFormImg : systemFormImg;
  });

  const bgTitle = computed(() => {
    return props.item.formType == FormType.CUSTOM ? 'CUSTOM' : 'SYSTEM';
  });
  const fontColor = computed(() => {
    return props.item.formType == FormType.CUSTOM ? '#ab7efe' : '#18a1f8';
  });
  const fillColor = computed(() => {
    return props.item.formType == FormType.CUSTOM ? '#eceaff' : '#e8f6ff';
  });
  const bgColor = computed(() => {
    return props.item.formType == FormType.CUSTOM ? '#f4f3ff' : '#f4fafe';
  });
</script>

<style lang="less" scoped>
  .list-item {
    width: 30%;
    height: 100px;
    background: v-bind(bgColor);
    border-radius: 8px;
    margin-left: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    border-color: v-bind(fontColor);

    &:hover {
      border: 1px dotted v-bind(fontColor);
    }

    .item-box {
      display: flex;
      margin: 14px;
      position: relative;

      .item-left {
        margin-right: 14px;
      }

      .item-right {
        .item-title {
          font-size: 12px;
          font-weight: bold;
          color: #999999;
          margin: 10px 0 4px 0;
          opacity: 0.8;
        }

        .item-form-name {
          color: #303133;
          font-size: 14px;
          font-weight: bold;
          opacity: 0.8;
        }
      }

      .fixed-circle {
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 8px;
        border: 1px solid v-bind(fontColor);
        padding: 2px 10px;
        color: v-bind(fontColor);
        font-size: 12px;
        cursor: pointer;
      }

      .fixed-circle:hover {
        background-color: v-bind(fontColor);
        color: #fff;
      }

      .fixed-title {
        position: absolute;
        top: 50px;
        left: 50px;
        color: #eaf1f5;
        font-size: 40px;
        font-weight: 500;
      }

      .fixed-checked {
        position: absolute;
        bottom: -16px;
        z-index: 1;
        right: -6px;
      }

      .form-icon {
        position: absolute;
        right: -20px;
        bottom: -28px;
        font-size: 48px;
        transform: rotate(310deg);
      }
    }
  }

  :deep(.ant-checkbox-inner) {
    border-radius: 50%;
    border-color: v-bind(fontColor);
  }

  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    border-radius: 50%;
    background-color: v-bind(fontColor);
  }

  :deep(.ant-checkbox-checked::after),
  :deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover),
  :deep(.ant-checkbox-inner),
  :deep(.ant-checkbox:hover),
  :deep(.ant-checkbox-input:focus + .ant-checkbox-inner) {
    border-color: v-bind(fontColor);
  }
</style>
